<template>
  <div class="whitelist-wrapper">
    <Button style="margin-bottom: 15px;" type="primary" @click="handleAdd">新增测试账号</Button>
    <div class="customer-main">
      <Table border :columns="columns" :data="list" :loading="loading"></Table>
    </div>

    <Modal
      title="新增测试账号"
      footer-hide
      v-model="addModal"
      :mask-closable="false"
      @on-cancel="handleModalCancel"
    >
      <Form ref="form" :model="form" :rules="rules" :label-width="80">
        <FormItem label="手机号" prop="phone">
          <Input type="text" placeholder="请输入手机号" v-model="form.phone" :maxlength="11"/>
        </FormItem>
        <FormItem style="margin-top: 36px;">
          <Button type="error" @click="handleModalCancel" style="margin-right: 10px;">取消</Button>
          <Button type="primary" @click="handleSubmit" :loading="btnLoading">确认提交</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "whitelist",
  data() {
    const validatePhone = (rule, value, callback) => {
      const reg = /1\d{10}$/;
      if (!reg.test(value)) {
        callback(new Error("输入的手机号格式不正确"));
      }
      {
        callback();
      }
    };
    return {
      columns: [
        { title: "添加时间", key: "addTime", align: "center" },
        { title: "姓名", key: "name", align: "center" },
        { title: "手机号", key: "phone", align: "center" },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            const { phone } = params.row;
            return h("div", [
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要删除吗？",
                    placement: "left",
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      this.handleDelete(phone);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "primary",
                        size: "small"
                      },
                      style: {
                        marginRight: "10px"
                      }
                    },
                    "删除"
                  )
                ]
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "你确定要清除数据吗？",
                    placement: "left",
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      this.handleRemove(phone);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      props: {
                        type: "error",
                        size: "small"
                      }
                    },
                    "清除数据"
                  )
                ]
              )
            ]);
          }
        }
      ],
      addModal: false,
      list: [],
      loading: true,
      form: {
        phone: ""
      },
      btnLoading: false,
      rules: {
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getWhitelist();
  },
  methods: {
    // 获取测试白名单列表
    getWhitelist() {
      this.loading = true;
      this.$http.get("/helsinki/admin/test-white-list").then(
        ({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.list = data;
          }
          this.loading = false;
        },
        error => {
          console.log(error.statusText);
        }
      );
    },
    // 新增客户
    handleAdd() {
      this.addModal = true;
    },
    // 删除账号
    handleDelete(phone) {
      this.$http.delete(`/helsinki/admin/test-white-list/${phone}`).then(
        ({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.$Message.success("删除账号成功");
            this.getWhitelist();
          }
          this.loading = false;
        },
        error => {
          console.log(error.statusText);
        }
      );
    },
    // 清除数据
    handleRemove(phone) {
      this.$http
        .post(`/helsinki/admin/test-white-list/${phone}/clear-data`)
        .then(
          ({ data: { data, info, errcode } }) => {
            if (errcode == 0) {
              this.$Message.success("清除数据成功");
              this.getWhitelist();
            }
            this.loading = false;
          },
          error => {
            console.log(error.statusText);
          }
        );
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$http
            .post("/helsinki/admin/test-white-list", {
              phone: this.form.phone
            })
            .then(
              ({ data: { data, info, errcode } }) => {
                if (errcode == 0) {
                  this.$Message.success("添加成功");
                  this.addModal = false;
                  this.$refs.form.resetFields();
                  this.getWhitelist();
                }
                this.loading = false;
              },
              error => {
                console.log(error.statusText);
              }
            );
        }
      });
    },
    // 取消回调
    handleModalCancel() {
      this.$refs.form.resetFields();
      this.addModal = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.whitelist-wrapper {
  padding: 15px;
}

.whitelist-main {
  margin-top: 15px;
}
</style>
